<template>
  <div id="MovieInfo">
    <el-container>
      <el-header height="200px">
        <el-container>
          <el-aside width="30%">
            <img :src="this.MovieInfo.MovieImg" style="width:150px;height:200px"/>
          </el-aside>
          <el-main>
            <el-container>
              <el-container>
                <el-aside width="50%">
                  <el-header>
                    <strong>{{MovieInfo.MovieName}}</strong>
                  </el-header>
                  <el-main>
                    <div>{{MovieInfo.MovieType}}</div>
                    <div v-if="MovieInfo.MovieDate">上映日期:{{MovieInfo.MovieDate.substring(0,10)}}</div>
                    {{MovieInfo.MovieAddress}}/{{MovieInfo.MovieTime}}分钟
                  </el-main>
                </el-aside>
                <el-main>
                  <el-button
                    type="primary"
                    style="top:100px;right:10px;position: relative;"
                    @click="ActBut=false;Act=false;Tic=true;id=+new Date()"
                    v-if="ActBut"
                  >点击购票</el-button>
                  <el-button
                    type="danger"
                    style="top:100px;right:10px;position: relative;"
                    @click="ActBut=true;Act=true;Tic=false;id=+new Date()"
                    v-if="Tic"
                  >返回</el-button>
                </el-main>
              </el-container>
            </el-container>
          </el-main>
        </el-container>
        <el-divider></el-divider>
      </el-header>
      <el-main>
        <actor v-if="Act" :key="id"></actor>
        <ticket v-if="Tic" :key="id"></ticket>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import Actor from "@/views/Actor";
import ticket from "@/views/ticket";
export default {
  components: {
    Actor,
    ticket
  },
  data() {
    return {
      Act: true,
      ActBut: true,
      Tic: false,
      activeNames: ["1", "2"],
      MovieID: null,
      ActorID: null,
      MovieInfo: [],
      ActorInfo: [],
      DirectInfo: [],
      ScheDate: [],
      activeIndex: "1",
      Review: true,
      Actor: false,
      id: +new Date()
    };
  },
  created:async function() {
    this.MovieID = this.$store.state.MovieId;
    this.Ajax.get("api/MovieInfoes/GetMovieInfo?id=" + this.MovieID).then(m => {
      this.MovieInfo = m.data;
      this.ActorID = m.data.ActorID;
    });
   
    this.Ajax.get("api/Actor/GetActorByMovieID?id=" + this.MovieID).then(A => {
      this.ActorInfo = A.data;
    });
    this.Ajax.get("api/Direct/GetDirectrByMovieID?id=" + this.MovieID).then(
      A => {
        this.DirectInfo = A.data;
      }
    );
   
    this.Ajax.get(
      "api/Schedule/GetSche?MovieID=" + this.$store.state.MovieId
    ).then(S => {
      this.ScheDate = S.data;
      
      if (this.ScheDate.length == 0) {
      this.ActBut = false;
      
    }
    });
   
  },
  mounted() {
   
  },
  methods: {
   
  },
};
</script>
<style>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>